<template>
    <div class="index">
        <el-row :gutter="20" class="total_info">
            <el-col :span="6" v-for="item in cardArr" :key="item.title">
                <!-- 使用封装的组件 ,把数组中的每一个对象成传递进去-->
                <Card :cardData="item" /> 
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Card from '@/components/Card/Card'
    export default {
        components:{
            Card
        },
        // 数据
        data() {
            return {
            // 卡片数据
            cardArr: [
                {
                    imgUrl: require("@/assets/img/logo.png"),
                    title: "总订单",
                    count: 102401
                },
                {
                    imgUrl: require("@/assets/img/logo.png"),
                    title: "总销售额",
                    count: 102402
                },
                {
                    imgUrl: require("@/assets/img/logo.png"),
                    title: "今日订单数",
                    count: 102403
                },
                {
                    imgUrl: require("@/assets/img/logo.png"),
                    title: "今日销售额",
                    count: 102404
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.index{
    .total_info{
        display: flex;
        justify-content: space-between;
    }
}
</style>